<html>
<head>
<meta name="viewport" content="width=320px,initial-scale = 1.0, user-scalable=no" />
<link rel="stylesheet" href="coffee-1.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-2.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-3.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-4.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-5.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="coffee-6.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<script>
    function setupTouchEvents() {
        var listEntries = document.getElementsByTagName('li');
        var currentPage = 1;
        var onTouchStart = function(){
            this.className = "touched";
        };
        var onTouchEnd = function(){
            this.className = "";                
            if (currentPage == 1) {
                document.getElementById('first-page').className = "hidden";
                document.getElementById('second-page').className = "";
                currentPage = 2;
            } else {
                document.getElementById('first-page').className = "";
                document.getElementById('second-page').className = "hidden";
                currentPage = 1;
            }
        }
        for(var i = 0; i < listEntries.length; i++){ 
            listEntries[i].addEventListener("touchstart", onTouchStart , true); 
            listEntries[i].addEventListener("touchend", onTouchEnd, true); 
        }
    }
</script>
<body onload='setupTouchEvents()'>
    <div id="container">
        <div id="first-page">
            <h1 class="welcome">Welcome to Mike's coffee</h1>
            <h2 class="menu-header">Menu</h2>
            <ul>
            	<li><a href="#espresso">Espresso</a></li>
            	<li><a href="#latte">Latte</a></li>
            	<li><a href="#cappucino">Cappucino</a></li>
            	<li><a href="#hotchocolate">Hot Chocolate</a></li>
            </ul>
        </div>

        <div id="second-page" class="hidden">    
            <ul>
                <li>Back to first page</li>
            </ul>
        </div>
    </div>
</body>
</html>